<template>
  <div class="notice-detail">
    <h1 class="notice-detail-title m-b-10">
      {{ noticeDetail.title }}
    </h1>
    <p class="publish-date color-gray m-b-10">发布时间：{{ noticeDetail.createTime }}</p>
    <div v-html="noticeDetail.content" class="ql-editor"></div>
    <div v-if="noticeDetail.files?.length" class="attach">
      <span class="color-gray">附件下载：</span>
      <div class="attach-list">
        <div
          class="c-p attach-item"
          v-for="file in noticeDetail.files"
          :key="file"
          @click="download(file.url)"
        >
          {{ file.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getAnnouncementDetail } from '@/api/park';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useDownload } from '@/hooks/useDownload';

const { download } = useDownload();

const route = useRoute();
const noticeDetail = ref<any>({});
onMounted(() => {
  const id = route.query.id as string | number;
  getAnnouncementDetail(id).then((res: any) => {
    if (res.code === 200) {
      noticeDetail.value = res.data;
    }
  });
});
</script>

<style lang="scss" scoped>
.notice-detail {
  min-height: 100vh;
  padding: 20px 100px;
  background-color: #fff;
  &-title {
    text-align: center;
  }
  .publish-date {
    text-align: center;
  }
  .attach {
    &-item {
      width: fit-content;
    }
  }
}

// 为渲染的HTML内容中的图片设置样式
.ql-editor {
  :deep(img) {
    width: 100%;
    height: auto;
  }
}
</style>
